import React from 'react';
// 定义头部导航条组件;
import { NavBar, Space, Dialog } from 'antd-mobile';
import { MoreOutline } from 'antd-mobile-icons';
import { useHistory } from 'react-router-dom'
import { useDispatch } from 'react-redux';
import { updateUserAction } from '@/store/actions/userAction'
const Mynavbar = (props) => {
    const his = useHistory();
    //console.log(props);
    const { children, isshowright } = props
    const dispath = useDispatch()
    const right = (
        !isshowright ? null :
            <div style={{ fontSize: 24 }}>
                {
                    props.rightContent == '退出' ?
                        <Space style={{ '--gap': '16px', fontSize: '16px' }} onClick={
                            () => {
                                // console.log('退出')
                                // 清空登录时存储的状态
                                Dialog.confirm({
                                    content: '确认要退出吗?',
                                    onConfirm: () => {
                                        dispath(updateUserAction(''))
                                        localStorage.removeItem('token')
                                        setTimeout(() => {
                                            his.push('/login')
                                        }, 500)

                                    }
                                })
                            }
                        } >
                            {props.rightContent}
                        </Space> : <Space style={{ '--gap': '16px' }}>
                            <MoreOutline />
                        </Space>
                }

            </div>
    )

    const back = () => {
        his.goBack()
    }

    return (
        <>
            <NavBar back='返回' right={right} onBack={back}>
                {children}
            </NavBar>
        </>
    );
}

export default Mynavbar;
